<template>

    <div class="login-forget">
        <h2>Password reset</h2>

        <!-- 输入内容 -->
        <form class="login-form" v-if="step == 1" @submit.prevent="doSend()">
            <h4>Please enter your registered email, and we will send you a password reset link.</h4>
            <label>
                <em v-if="error.email ==6004">Account does not exist. <a @click="setTab('signup')">Sing up</a></em>
                <em v-else-if="error.email" v-text=error.email></em>
                <input :maxlength="64" placeholder="Email" v-model="form.email" onkeyup="this.value=this.value.replace(/(\s*)/g,'')" @blur="checkData('email')" />
            </label>
            <button type="primary">
                <span>Send</span>
                <UxLoading :loading="loading" />
            </button>
        </form>

        <!-- 检查 -->
        <div class="login-check" v-if="step == 2">
            <h4>We just sent an email to {{form.email}} with password reset instructions. Please check it.</h4>
            <p>Did not receive the mail?<a @click="step = 1">Resend</a></p>
        </div>

        <!-- https://www.podpartner.com/change_password?t=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2OTY5Mjc3MTYsImVtYWlsIjoiMTM1NzExMzI2MkBxcS5jb20iLCJ1c2VyX2lkIjoxNCwic2l6ZV90eXBlIjowLCJhZmZpbGlhdGluZ190aW1lX3pvbmUiOiIiLCJuZWVkX3ZlZGlvIjp0cnVlLCJmaXJzdF90ZW1wbGF0ZSI6dHJ1ZSwiZmlyc3Rfc2FtcGxlIjp0cnVlLCJmaXJzdF9zdG9yZSI6dHJ1ZX0.zWF90u1Zp5jeAFxggO040kInBPrSJAF3-42S7UkPq5o -->

        <p>
            <span>Return to </span>
            <a @click="setTab('login')">Sign in</a>
        </p>

    </div>
</template>

<script>
import RE from "@/utils/RE";
export default {
    data () {
        return {
            step: 1,
            loading: false,
            form: { email: '' },
            error: { email: '' }
        };
    },

    methods: {
        setTab (tab) {
            this.$emit('update:tab', tab)
        },

        async doSend () {

            if (this.loading) {
                // 登录中
                return;
            } else if (!this.checkData()) {
                // 验证不通过
            } else {
                // 登录
                const email = this.form.email.replace(/(^\s*)|(\s*$)/g, "")
                const request = {
                    email: email,
                };

                this.loading = true;
                const res = await this.$http("postForgetPass", request);

                if (res.code == 0) {
                    this.$uxMessage.success("Sent an email to " + request.email + " with password reset instructions");
                    this.loading = false;
                    this.step = 2;

                } else if (res.code == 6004) {
                    this.loading = false;
                    this.error.email = 6004
                    this.$uxMessage.warning(res.msg);
                } else {
                    this.loading = false;
                    this.$uxMessage.warning(res.msg);
                }

            }

        },

        checkData (name) {

            const check = {
                email: [
                    // 必须为长度必须1个以上
                    { reg: RE.not_empty, msg: 'Please enter a valid email address' },
                    // 格式要正确
                    { reg: RE.email, msg: 'Please enter a valid format' },
                ],
            }

            const keys = name ? [name] : Object.keys(this.form)
            const notify = []
            // 去首尾的空格
            keys.map(key => this.form[key] = (this.form[key] || '').replace(/^\s+|\s+$/gm, ''))
            keys.map(key => {
                const rule = check[key] || []
                const err = rule.find(item => !item.reg.test(this.form[key]))
                if (err) {
                    this.error[key] = err.msg;
                    notify.push(err)
                } else {
                    this.error[key] = '';
                }
            })
            return notify.length == 0
        },

    },
    created () {

    },
};
</script>

<style lang="scss" scoped>
.login-forget {
    flex: 1;
    padding-right: 460px;
    padding-left: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;

    &::before {
        content: '';
        position: absolute;
        height: 100%;
        width: 380px;
        right: 0;
        top: 0;
        background-color: #fafafa;
        background-repeat: no-repeat;
        background-size: 197px, 136px;
        background-image: url('https://img.podpartner.com/static/images-20230202/forget-eamil.png');
        background-position: center;
        border-radius: 0 10px 10px 0;
    }

    & > h2 {
        height: 28px;
        font-size: 18px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 28px;
    }

    & > p {
        margin-top: 20px;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #555;
        line-height: 16px;
        a {
            color: #ea4c89;
            cursor: pointer;
            &:hover {
                color: #d5417a;
            }
        }
    }
}

.login-form {
    display: flex;
    flex-direction: column;
    margin-top: 72px;
    height: 240px;
    & > h4 {
        font-size: 16px;
        color: #000;
        font-family: Roboto-Regular, Roboto;
        line-height: 22px;
        font-weight: 400;
        margin-bottom: 24px;
    }

    & > label {
        position: relative;

        & + label {
            margin-top: 24px;
        }
        input {
            height: 42px;
            vertical-align: top;
        }
        em {
            position: absolute;
            left: 0;
            top: 100%;
            margin-top: 2px;
            font-size: 12px;
            color: #f44336;
            line-height: 16px;

            & ~ input {
                border-color: #f44336;
            }
        }
        i {
            position: absolute;
            line-height: 20px;
            font-size: 20px;
            cursor: pointer;
            top: 50%;
            margin-top: -10px;
            right: 14px;
        }
        a {
            text-decoration: underline;
            cursor: pointer;
        }
    }

    & > button {
        margin-top: 32px;
        position: relative;
    }
}

.login-check {
    display: flex;
    flex-direction: column;
    margin-top: 72px;
    height: 240px;
    & > h4 {
        font-size: 16px;
        color: #000;
        font-family: Roboto-Regular, Roboto;
        line-height: 22px;
        font-weight: 400;
        margin-bottom: 24px;
    }

    & > p {
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #555;
        a {
            color: #555;
            text-decoration: underline;
            cursor: pointer;
            &:hover {
                color: #ea4c89;
            }
        }
    }
}

@media (max-width: 960px) {
    .login-forget {
        & > h2 {
            text-align: center;
        }
        padding: 52px 14px 0;
        &::before {
            display: none;
        }
    }
}
</style>
